<template>
    <div class="level">
        <h1>医院</h1>
        <div class="level-content">
        <div class="level-content-left">等级:</div>
        <ul>
            <!-- 全部高亮显示 -->
            <li :class="{active:activeFlag==''}" @click="changeLevel('')">全部</li>
            <li v-for="level in levelArr" :key="level.value" :class="{active:activeFlag==level.value}" @click="changeLevel(level.value)">{{level.name}}</li>
        </ul>
    </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue';
import {reqHospitalLevelAndArea} from '../../../api/home/index';
import type { HospitalLevelAndAreaResponseData,HospitalLevelAndAreaArr } from "../../../api/home/type";
// 定义一个数组存储医院等级数据
let levelArr = ref<HospitalLevelAndAreaArr>([]);
// 控制医院等级高亮显示数据
let activeFlag = ref<string>('');
// 组件挂载完毕
onMounted(()=>{
    getLevel();
});

// 获取医院等级的数据
const getLevel = async()=>{
    let result:HospitalLevelAndAreaResponseData = await reqHospitalLevelAndArea('HosType');
    // console.log(result);
    // 存储医院等级的数据
    if(result.code==200){
        levelArr.value = result.data;
    }
};

// 点击等级的按钮回调
const changeLevel=(level:string)=>{
    // 高亮响应数据存储level数值
    activeFlag.value = level;
    // 触发自定义事件：将医院等级参数回传给父组件
    $emit('getLevel',level)
}
let $emit = defineEmits(['getLevel']);
</script>

<style scoped lang="scss">
.level{
    color:#a7abb7;
    .level-content{
        display:flex;
        margin-top:20px;
        .level-content-left{
            margin-right:10px;
        }
        ul{
            display:flex;
            li{
                margin-right:10px;
                &.active{
                    color:#e38b00;
                }
            }
            li:hover{
                    color:#e38b00;
                    cursor:pointer;
                }
        }
    }
}

</style>